import { Component, OnDestroy, OnInit } from '@angular/core';
import { ProgressStatus } from '@iux/live';

@Component({
  selector: 'app-customize',
  templateUrl: './customize.component.html',
})
export class CustomizeComponent implements OnInit, OnDestroy {
  colors = [
    [0, 'red'],
    [20, '#eb2f96'],
    [40, '#2f54eb'],
    [60, '#722ed1'],
    [80, '#13c2c2'],
    [100, '#52c41a'],
  ];
  status: ProgressStatus = 'normal';
  value = 0;
  interval;

  ngOnInit(): void {
    this.interval = setInterval(() => {
      this.status = 'active';
      this.value = this.value + Math.floor(Math.random() * 10) + 1.21;
      this.value = Number(this.value.toFixed(2));
      if (this.value >= 100) {
        this.value = 100;
        const timer = setTimeout(() => {
          this.value = 0;
          this.status = 'normal';
          clearTimeout(timer);
        }, 1000);
      }
    }, 1000);
  }

  ngOnDestroy(): void {
    clearInterval(this.interval);
  }
}
